<template>
  <Header></Header>
  <div class="main">
    <div class="body">
      <div class="Recommendations items">
        <div class="list_div vip" :style="{'background-image': `url('${state.adList.ad_url}')`}"  @click="$router.push(state.adList.jump_url)"></div>
        <div class="list_top_right">
          <div class="list">
            <div class="between">
              <div class="items">
                <img class="small_icon" src="/src/assets/icons/hot_sale.png" alt="">
                <div class="mLeft8 title_style_bold">Горячий список</div>
              </div>
              <div class="items" style="cursor: pointer" @click="$router.push('/hotSellerList')">
                <div class="title_style_small">Больше</div>
                <img src="/src/assets/icons/arrow_right.png" alt="">
              </div>
            </div>
            <div class="list_Data between">
              <div class="between column">
                <div class="shopping_data">
                  <img class="icon_hot_sale_rank" src="/src/assets/icons/top1.png">
                  <div class="icon_hot_sale_rank">TOP1</div>
                  <img src="/src/assets/image/cssb.png" alt="">
                </div>
                <div class="shopping_price">398 ₽</div>
                <div class="shopping_name">Ручка</div>
              </div>
              <div class="between column">
                <div class="shopping_data">
                  <img class="icon_hot_sale_rank" src="/src/assets/icons/top2.png">
                  <div class="icon_hot_sale_rank">TOP2</div>
                  <img src="/src/assets/image/cssb.png" alt="">
                </div>
                <div class="shopping_price">398 ₽</div>
                <div class="shopping_name">Ручка</div>
              </div>
              <div class="between column">
                <div class="shopping_data">
                  <img class="icon_hot_sale_rank" src="/src/assets/icons/top3.png">
                  <div class="icon_hot_sale_rank">TOP3</div>
                  <img src="/src/assets/image/cssb.png" alt="">
                </div>
                <div class="shopping_price">398 ₽</div>
                <div class="shopping_name">Ручка</div>
              </div>
              <div class="between column">
                <div class="shopping_data">
                  <img class="icon_hot_sale_rank" src="/src/assets/icons/top4.png">
                  <div class="icon_hot_sale_rank">TOP4</div>
                  <img src="/src/assets/image/cssb.png" alt="">
                </div>
                <div class="shopping_price">398 ₽</div>
                <div class="shopping_name">Ручка</div>
              </div>
            </div>
          </div>

        <div class="type">
          <div class="between">
            <div class="items">
              <img class="small_icon" src="/src/assets/icons/all_category.png" alt="">
              <div class="mLeft8 title_style_bold">Все колонки</div>
            </div>
            <div class="items" style="cursor: pointer" @click="$router.push('/shopping_type')">
              <div class="title_style_small">Больше</div>
              <img src="/src/assets/icons/arrow_right.png" alt="">
            </div>
          </div>
          <div class="type_Data items">
            <div v-for="index of 8" style="cursor: pointer">
              <div class="icon">
                <img src="/src/assets/image/yfcs.png" alt="">
              </div>
              <div>Мужская одежда</div>
            </div>

          </div>
        </div>
        <div class="list_div quick_inquiry" @click="$router.push('/Quick_inquiry')">
          <div class="quick_inquiry_title">Быстрый запрос</div>
          <div class="items column">
            <div class="quick_inquiry_div">
              <div>
                <div class="items input_title_div">
                  <img src="/src/assets/icons/input_1.png" alt="">
                  <div class="input_title">Название продукта</div>
                </div>
                <div class="input_div center c99">Введите название продукта</div>
              </div>
              <div>
                <div class="items input_title_div">
                  <img src="/src/assets/icons/input_2.png" alt="">
                  <div class="input_title">Контактная информация</div>
                </div>
                <div class="input_div center c99">Введите контактные данные</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div class="mTop40">
        <img style="cursor: pointer" src="/src/assets/icons/placard.png" alt="">
      </div>
      <div class="">
        <Scroll_view type="1" :scrollList="state.scrollList" @clickTab="clickTabFun"></Scroll_view>
      </div>
      <div class="">
        <Product_list :list="state.goodsObj.list"></Product_list>
      </div>
      <div class="mores">
        <div class="moreBtn" @click="jixuxiazFun">Продолжить загрузку</div>
      </div>
    </div>
    <div class="rightNavBox">
      <div class="nevItem">
        <div class="navIcon">
          <img src="/src/assets/image/kefu.png" alt="">
        </div>
        <div class="navTitle">
          Обслуживание клиентов
        </div>
      </div>
      <div class="nevItem">
        <div class="navIcon">
          <img src="/src/assets/image/zixun.png" alt="">
        </div>
        <div class="navTitle">
          Быстрый запрос
        </div>
      </div>
      <div class="nevItem">
        <div class="navIcon">
          <img src="/src/assets/image/gouwuche.png" alt="">
        </div>
        <div class="navTitle">
          Список покупок
        </div>
      </div>
      <div class="nevItem">
        <div class="navIcon">
          <img src="/src/assets/image/fhdb.png" alt="">
        </div>
        <div class="navTitle">
          Вернуться наверх
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Home" setup>
import { ref,reactive,onMounted } from "vue";
import Header from '@/components/Header/Header.vue'
import Product_list from '@/components/Product_list/Product_list.vue'
import Scroll_view from '@/components/Scroll_view/Scroll_view.vue'
import {getAdList, getCategoryList, getIndexList} from "@/api/api.ts";
const state = reactive({
  goodsObj:{
    list:[],
    page:{
      page:1,
      limit:30,
      topCategoryId:null
    },
    total:0
  },
  adList:{},
  scrollList:[]
})
const getIndexListFun = () => {
  getIndexList({...state.goodsObj.page}).then((res:any) => {
    if(res.errCode === 0){
      state.goodsObj.list = [...state.goodsObj.list,...res.returnData.list]
      state.goodsObj.total = res.returnData.total
    }
  })
}
const getAdListFun = () => {
  getAdList({page:1,limit:30,position:7}).then((res:any) => {
    if(res.errCode === 0){
      console.log(res)
      state.adList = res.returnData.list[0]
    }
  })
}
const getCategoryListFun = () => {
  getCategoryList({level:1}).then((res:any)=>{
    console.log(res)
    state.scrollList = res.returnData
  })
}
const jixuxiazFun = () => {
  state.goodsObj.page.page += 1
  getIndexListFun()
}
const clickTabFun = (topId:any) => {
  if(topId !== -1){
    state.goodsObj.page.topCategoryId = topId
    state.goodsObj.page.page = 1
    state.goodsObj.list = []
  } else {
    state.goodsObj.page.topCategoryId = null
  }
  getIndexListFun()
}
onMounted(() => {
  getIndexListFun()
  getAdListFun()
  getCategoryListFun()
})
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: center;
  .rightNavBox{
    position: fixed;
    right: 0;
    top: 400px;
    width: 100px;
    height: 300px;
    background: #FFFFFF;
    border-radius: 12px 0px 0px 12px;
    border: 1px solid #999999;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 0 16px;
    border-right: 0;
    .nevItem{
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .navIcon{
        width: 24px;
        height: 24px;
        img{
          width: 100%;
        }
      }
      .navTitle{
        font-family: Segoe UI, Segoe UI;
        font-weight: 600;
        font-size: 12px;
        color: #333333;
        line-height: 12px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .body {
    width: 1400px;

    .Recommendations {
      height: 610px;
      padding-top: 30px;
      .list_div {
        width: 338px;
        height: 240px;
        top: 164px;
        left: 260px;
        border-radius: 8px;
      }

      .vip {
        height: 610px;
        width: 920px;
        //background: linear-gradient(0deg, #3A6BF6, #3A6BF6),
        //  linear-gradient(270deg, rgba(144, 180, 228, 0.4) 0%, rgba(58, 107, 246, 0.4) 100%);
        //background-image: url('/src/assets/icons/VIP.png');
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .small_icon{
        width: 20px;
        height: 20px;
      }
      .list_top_right{
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
      }

      .list {
        background: #F5F5F5;
        margin-left: 16px;
        border: 1px solid #CCCCCCCC;
        padding: 15px 14px 30px 14px;
        width: 456px;
        height: 192px;
        border-radius: 8px;
        box-sizing: border-box;


        .list_Data {
          margin-top: 16px;



          .shopping_data {
            position: relative;
            width: 90px;
            height: 90px;
            // top: 72px;
            // left: 16px;
            border-radius: 8px;
            background: #FFFFFF;
            img{
              width: 90px;
              height: 90px;
            }
              .icon_hot_sale_rank{
                width: 43px;
                height: 18px;
                font-size: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
                position: absolute;
                top: -6px;
                left: 12px;
              }
          }

          .shopping_price {
            font-family: Segoe UI, Segoe UI;
            font-weight: bold;
            font-size: 16px;
            color: #F83C57;
            text-align: center;
          }

          .shopping_name {
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 600;
            line-height: 12px;
            text-align: center;
            color: #333333;
            margin-top: 4px;
          }
        }
      }

      .type {
        background: #F5F5F5;
        margin-left: 16px;
        border: 1px solid #CCCCCCCC;
        padding: 15px 14px 30px 14px;
        width: 456px;
        height: 192px;
        border-radius: 8px;
        box-sizing: border-box;

        .type_Data {
          margin-top: 4px;
          width: 100%;
          flex-wrap: wrap;
          display: flex;
          div {
            width: 32%;
            margin: 1% 0.5%;
            font-family: Segoe UI, Segoe UI;
            font-weight: 600;
            font-size: 12px;
            color: #333333;
            text-align: left;
            display: flex;
            text-wrap: nowrap;
            align-items: center;

            .icon{
              width: 24px;
              height: 24px;
              background: #FFFFFF;
              border-radius: 20px 20px 20px 20px;
              margin-right: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              img{
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }

      .title_style_bold {
        height: 16px;
        color: #333333;
        line-height: 16px;
        font-size: 16px;
        font-weight: bold;
      }

      .title_style_small {
        height: 14px;
        color: #999999;
        line-height: 14px;
      }

      .quick_inquiry {
        background: url('/src/assets/icons/quick_inquiry.png') 100%;
        background-size: cover;
        margin-left: 16px;
        width: 456px;
        height: 193px;
        cursor: pointer;
        .quick_inquiry_title {
          width: 210px;
          height: 26px;
          top: 24px;
          left: 16px;
          font-family: Segoe UI;
          font-size: 16px;
          font-weight: 700;
          line-height: 26px;
          text-align: left;
          color: #FFFFFF;
          margin: 7px 0 7px 16px;
        }

        .quick_inquiry_div {
          width: 424px;
          height: 146px;
          left: 16px;
          border-radius: 8px;
          background: #FFFFFF;

          .input_title_div {
            margin: 8px 0 0 12px;

            .input_title {
              font-size: 12px;
              font-weight: bold;
              margin-left: 4px;
            }
          }

          .input_div {
            width: 382px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid #CCCCCC;
            margin: 8px 0 0 12px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 14.4px;
          }
        }
      }
    }

  }
  .mores{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 60px;
    margin-bottom: 130px;
    .moreBtn{
      width: 280px;
      height: 56px;
      border-radius: 12px 12px 12px 12px;
      border: 1px solid #CCCCCC;
      //font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      display: flex;
      align-content: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
</style>
